<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{.title}}</title>
	<style type="text/css">
		body {
		    margin: 0;
		    padding: 0;
		}

	    /* 悬浮目录样式 */
	    .floating-menu {
		    position: fixed; /* 固定定位 */
		    background-color: #CACACA; /* 背景颜色 */
		    width: 200px; /* 固定宽度 */
		    z-index: 1000; /* 确保在最前 */
		    height: 100%;
		    overflow-y: auto;
	    }

	    .floating-menu ul {
	    	padding: 0;
	    	margin: 0;
	    }

	    .floating-menu li {
	    	word-wrap: break-word;
			word-break: break-word;
			padding-left: 0px;
			padding-right: 10px;
	    }

	    .floating-menu a {
	    	text-decoration: none;
	    	color: #007bff;
	    	font-size: 14px;
	    }

	    .floating-menu a:hover {
	    	text-decoration: underline;
	    }

	    /* 内容区域样式 */
	    section {
	    	margin: 0px 0px 0px 200px;
	    	padding: 0px 10px 10px 10px;
	    }

        section h3 {
            margin-top: 0;
            margin-bottom: 5px;
        }

        pre {
            background-color: #f4f4f4;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: Consolas, "Courier New", monospace;
            color: #333;
            overflow-x: auto;
			margin-bottom: 0;
        }

        /* 关键字高亮 */
        .sql-keyword {
            color: #d73a49; /* 红色 */
            font-weight: bold;
        }

        /* 表名、列名等 */
        .sql-identifier {
            color: #6f42c1; /* 紫色 */
        }

        /* 字符串值 */
        .sql-string {
            color: #032f62; /* 蓝色 */
        }
	</style>
</head>
<body>
	<div class="floating-menu">
		<ul style="padding-left: 30px; margin-top: 10px; margin-bottom: 10px;">
			<li><h3>目录</h3></li>
			{{.catalog}}
		</ul>
	</div>
	<div>
		<h2 style="margin: 0px 0px 0px 200px; padding: 10px;">{{.title}}</h2>
		{{.content}}
	</div>
</body>
</html>